<template>
    <div class="app-container">
        <!-- 顶部 Header 区域开始 -->
        <mt-header fixed title="vue小项目"></mt-header>

        <!-- 顶部 Header 区域结束 -->

        <!-- 中间的路由 router-view 区域开始-->


        <!-- 中间的路由 router-view 区域结束-->

        <!-- 底部 Tabbar 区域开始-->
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href=" ">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">消息</span>
            </a>
            <a class="mui-tab-item" href=" ">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">通讯录</span>
            </a>
            <a class="mui-tab-item" href=" ">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
                <!--<span>111</span>-->
            </a>
        </nav>

        <!-- 底部 Tabbar 区域结束-->

        <h1>again</h1>
    </div>
</template>

<script>

</script>

<style scoped>
.app-container{
    /*因为header的样式是position: fixed;
    所以脱离了标准流，底下的内容会往上顶，header的height为40px*/
    padding-top:40px;
    position: fixed;
}
</style>
